<!-- 邀请好友页面海报分享弹窗组件 -->
<!-- XXX 已弃用，考虑删除 -->
<template>
  <div
    class="container"
    @click="setInvitePopupType('no')"
  >
    <!-- 海报 -->
    <canvas
      ref="poster"
      class="poster"
      canvas-id="poster"
      @click.prevent
    />
    <!-- 分享菜单 -->
    <div
      class="share-menu"
      @click.prevent
    >
      <!-- 操作条 -->
      <div class="operation-bar" />
      <!-- 分享选项 -->
      <!-- <div class="operation-item">
        <button class="btn" open-type="share" id="friend" :data-img="canvasImgUrl">
          <image class="img" src="https://ustatic.hudongmiao.com/joymew-host-contest/invite-friend-wechat.png" alt=""></image>
        </button>
        <text class="text">分享给朋友</text>
      </div>
      <div class="operation-item">
        <button class="btn" id="friend-circle" :data-img="canvasImgUrl">
          <image class="img" src="https://ustatic.hudongmiao.com/joymew-host-contest/invite-friend-friend-circle.png" alt=""></image>
        </button>
        <text class="text">转发朋友圈</text>
      </div> -->
      <div
        class="operation-item"
        @click="savePhoto"
      >
        <button class="btn">
          <image
            class="img"
            src="https://ustatic.hudongmiao.com/joymew-host-contest/invite-friend-save-photo.png"
            alt=""
          />
        </button>
        <text class="text">
          保存图片
        </text>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import { getCurrentInstance, onMounted, ref, watch } from 'vue';
import { requestShareQrCode } from '@/api/api-user';
import { usePopup } from '@/stores/popup';
import { useUser } from '@/stores/user';

const popup = usePopup();
const { invitePopupType } = storeToRefs(popup);
const { setInvitePopupType } = popup;
const user = useUser();

// 组件实例
let instance: any = null;
/** canvas图片地址 */
const canvasImgUrl = ref<string>('');
/** 二维码地址 */
const qrCodeUrl = ref<string>('');

// 监听组件显示状态
watch(invitePopupType, (val) => {
  // 如果val的值等于poster
  if (val === 'poster') {
    // instance = getCurrentInstance();
    // let temUrl: string
    // let qrCodeUrl: string
    // loadImg()
    //   .then((res) => {
    //     console.log('res', res);
    //     temUrl = res.path;
    //     return getQrCodeUrl()
    //   })
    //   .then((res) => {
    //     qrCodeUrl = res
    //     drawPoster(temUrl, '');
    //   });
  }
});

onMounted(() => {
  instance = getCurrentInstance();
  let temUrl: string;
  getQrCodeUrl()
    .then(() => loadTemImg())
    .then((res) => {
      temUrl = res.path;
    })
    .then((res) => {
      drawPoster(temUrl, qrCodeUrl.value);

      setCanvasImgUrl();
    });
});

// 加载网络图片
const loadTemImg = () => new Promise((resolve, reject) => {
  uni.getImageInfo({
    src: 'https://ustatic.hudongmiao.com/joymew-host-contest/invite-friend-poster-template.png?replace=1',
    success: (res) => {
      resolve(res);
    },
    fail: (err) => {
      reject(err);
    },
  });
});

// 获取二维码地址
const getQrCodeUrl = async () => {
  const page = 'pages/index';
  const scene = user.userInfo.inviteKey;
  const appid = 'wx2551ee586ff61304';

  console.log('scene', scene);

  const res = await requestShareQrCode(page, scene, appid);
  console.log('qrCodeUrl', res.data.smallProgramCode);
  uni.getImageInfo({
    src: res.data.smallProgramCode,
    success: (res) => {
      qrCodeUrl.value = res.path;
    },
    fail: (err) => { },
  });
};

// 绘制海报
const drawPoster = (temUrl: string, qrCodeUrl: string) => {
  console.log('temUrl', temUrl);
  console.log('qrCodeUrl', qrCodeUrl);
  const ctx = uni.createCanvasContext('poster', instance);
  ctx.drawImage(
    temUrl,
    0,
    0,
    342,
    459,
  );
  // ctx.draw()
  // // 绘制二维码
  // ctx.drawImage(
  //   qrCodeUrl,
  //   115,
  //   300,
  //   112,
  //   112
  // );
  // 将二维码图片裁剪成圆形，然后绘制到canvas上
  // ctx.save();
  // ctx.beginPath();
  // ctx.arc(170, 356, 60, 0, 2 * Math.PI);
  // ctx.closePath();
  // ctx.clip();
  ctx.drawImage(
    qrCodeUrl,
    115,
    300,
    112,
    112,
  );
  // ctx.restore();

  ctx.draw();
};

/** 设置海报图片地址 */
const setCanvasImgUrl = () => {
  uni.canvasToTempFilePath({
    canvasId: 'poster',
    success: (res) => {
      console.log('res', res);
      canvasImgUrl.value = res.tempFilePath;
    },
    fail: (err) => {
      console.log(err);
    },
  }, instance);
};

/**
 * 保存图片
 */
const savePhoto = () => {
  uni.canvasToTempFilePath({
    canvasId: 'poster',
    success: (res) => {
      console.log('res', res);
      uni.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success: () => {
          uni.showToast({
            title: '保存成功',
            icon: 'success',
            duration: 2000,
          });
        },
        fail: (err) => {
          console.log(err);
        },
      });
    },
    fail: (err) => {
      console.log(err);
    },
  }, instance);
};

</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;

  background: rgb(0 0 0 / 50%);

  // 海报
  .poster {
    position: absolute;
    top: 112px;
    left: 50%;

    width: 342px;
    height: 459px;

    transform: translate(-50%, 0);
  }

  // 分享菜单
  .share-menu {
    position: absolute;
    bottom: -1px;
    left: 0;

    width: 100vw;
    height: 160px;

    background: #ededed;
    border-radius: 20px 20px 0 0;

    padding: 48px 0 55px;
    display: flex;
    justify-content: space-around;

    // 操作条
    .operation-bar {
      position: absolute;
      top: 16px;
      left: 50%;

      width: 36px;
      height: 4px;

      background: #d4d6d8;
      border-radius: 17px;

      transform: translateX(-50%);
    }

    // 分享选项
    .operation-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      .btn {
        position: relative;

        width: 76px;
        height: 76px;
        overflow: auto;

        border: .1px solid #fff;
        border-radius: 50%;

        padding: 0;

        .img {
          position: absolute;
          top: 50%;
          left: 50%;

          width: 100%;
          height: 100%;

          transform: translate(-50%, -50%);
        }
      }

      .text {
        margin-top: 12px;

        font-size: 13px;
        color: #707170;
      }
    }
  }
}
</style>
